<template>
  <div class="creationPage">
    <div class="filterVue">
      <div style="display: flex">
        <div class="filter">
          <span style="padding-right: 10px">结算状态</span>
          <el-select v-model="params.status" placeholder="请选择">
            <el-option v-for="item in status_arr" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="filter">
          <div style="padding-right: 10px">申请人</div>
          <el-input v-model="params.userName" placeholder="请输入" style="margin-left: 10px; width: 190px" @input="input"></el-input>
        </div>
      </div>
      <div style="display: flex">
        <div class="btn1" @click="search">查询</div>
        <div class="btn1" @click="clearAll">清空</div>
      </div>
    </div>
    <div class="tableVue">
      <div class="tableList">
        <div class="thVue">
          <div class="th">提现单号</div>
          <div class="th">申请人</div>
          <div class="th">提现银行</div>
          <div class="th">提现金额</div>
          <div class="th">提现状态</div>
          <div class="th">申请时间</div>
          <div class="th">操作</div>
        </div>
        <div class="tdVue">
          <div class="tdItem" v-for="(item, index) in list" :key="index">
            <div class="td">{{ item.settlementNo }} </div>
            <div class="td">{{ item.userName }}</div>
            <div class="td">{{ item.bankType }}</div>

            <div class="td">{{ item.amount }}</div>
            <div class="td">{{ status_arr[item.status-1].label }}</div>

            <div class="td">{{ item. createTime }}</div>
            <div class="td">
              <span  style="color: #389bf6; cursor: pointer; font-weight: 600; padding: 0 10px" @click="deal(item)" v-if="item.status==1">处理</span>
            </div>
          </div>
        </div>
        <div class="paginationVue">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="params.limit"
            @current-change="pageChange"
          ></el-pagination>
        </div>
      </div>
    </div>

    <el-drawer title="" :visible.sync="drawer" direction="rtl">
      <div class="drawerVue">
          <div class="topVue">处理详情</div>
          <div class="label">提现信息</div>
          <div class="flex">
            <div class="key">申请人姓名</div>
            <div class="value">{{ detail.userName }}</div>
          </div>
          <div class="flex">
            <div class="key">身份证号码</div>
            <div class="value">{{ detail.idCardNo }}</div>
          </div>
          <div class="flex">
            <div class="key">提现金额</div>
            <div class="value">{{ detail.amount }}</div>
          </div>
          <div class="flex">
            <div class="key">银行卡号</div>
            <div class="value">{{ detail.bankCardNo }}</div>
          </div>
          <div class="flex">
            <div class="key">提现银行</div>
            <div class="value">{{ detail.bankType }}</div>
          </div>
          <div class="flex">
            <div class="key">开户行</div>
            <div class="value">{{ detail.bankName }}</div>
          </div>
          <div class="label">提现处理</div>
          <div style="padding-left: 20px;">
              <el-radio-group v-model="radio">
              <el-radio :label="2">通过</el-radio>
              <el-radio :label="3">拒绝</el-radio>
            </el-radio-group>
          </div>
          <div class="label">备注说明</div>
          <div style="padding: 0 20px;">
            <el-input type="textarea" :rows="5" resize="none" placeholder="请输入" v-model="reason"></el-input>
          </div>
          <div class="btnVue">
            <div class="btn" @click="submit">确定</div>
           <div class="btn" @click="drawer = false">取消</div>

        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { closingList, auditApi } from "@/api/creation"
export default {
  data() {
    return {
      params: {
        status: '',
        userName: '',
        limit: 15,
        page: 1,
      },
      list: [],
      total: 0,
      status_arr: [{label: "待审核", value: 1}, {label: "通过", value: 2}, {label: "拒绝", value: 3}],
      drawer: false,
      detail: {},
      radio: 2,
      reason: "",
    };
  },

  created(){
    this.getList()
  },
  methods: {
    search() {
      this.params.page = 1
      this.getList()
    },
    input(){
        if(!this.params.userName) {
          this.params.page = 1
          this.getList()
        }
      },
    clearAll() {
      this.params = {
          status: '',
          name: '',
          limit: 15,
          page: 1,
        }
        this.getList()
    },
    getList() {
      closingList(this.params).then(res=>{
        this.list = res.list
        this.total = res.total
        console.log(this.list)
      })
    },

    submit(){
      auditApi({
        id: this.detail.id,
        reason: this.reason,
        status: this.radio
      }).then(res=>{
        this.drawer = false
        this.params.page = 1
        this.getList()
        this.$message({
            message: '处理成功',
            type: 'success',
          });
      })
    },
    deal(item){
      this.drawer=true
      this.detail = item
      console.log(this.detail)
    },
    pageChange(e) {
      console.log(e);
      this.params.page = e;
      this.getList();
    },
  },
};
</script>


<style lang="scss">
.el-drawer .el-drawer__body {
    padding: 0 !important;
  }
.creationPage {
  width: 100%;
  height: calc(100vh - 186px);
  background: #fff;
  .filterVue {
    width: 100%;
    height: 62px;
    display: flex;
    align-items: center;
    padding: 15px;
    .filter {
      display: flex;
      align-items: center;
      padding-right: 30px;
    }
    .btn1 {
      width: 60px;
      height: 32px;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      background: #2561ef;
      color: #fff;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .tableVue {
    flex: 1;
    height: calc(100vh - 186px - 62px);
    .thVue {
      width: 100%;
      display: flex;
      height: 70px;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .th {
        flex: 1;
        color: #333333;
        font-weight: 600;
        text-align: center;
      }
      .th:nth-last-child(1) {
        width: 250px;
      }
    }
    .tdVue {
      width: 100%;
      height: calc(100vh - 186px - 62px - 70px - 60px);
      overflow-y: scroll;
      .tdItem {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .td {
          flex: 1;
          text-align: center;
        }
        .td:nth-last-child(1) {
          width: 250px;
        }
      }
    }
    .tdVue::-webkit-scrollbar {
      width: 0;
    }
    .paginationVue {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .drawerVue {
    width: 100%;
    .topVue {
      width: 100%;
      height: 60px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      color: #333;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid #f5f5f5;
    }
    .label {
      color: #888;
      font-weight: 600;
      font-size: 15px;
      padding: 20px;
    }
    .flex {
      display: flex;
      padding: 10px 20px;
      .key {
        width: 120px;
        color: #333;
        font-size: 15px;
      }
      .value {
        color: #333;
        font-size: 15px;
      }
    }
    .btnVue {
    display: flex;
    padding-left:5px;
    margin-top: 15px;
    .btn {
      width: 66px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      margin-left: 15px;
      cursor: pointer;
    }
    .btn:nth-child(2) {
      color: #333;
      border: 1px solid #f5f5f5;
      border-radius: 4px;
    }
    .btn:nth-child(1) {
      color: #fff;
      background: #0256ff;
      border-radius: 4px;
    }
  }
  }
}
</style>